<template>
    <u-swipe-action>
        <u-swipe-action-item :options="swipeOptions" v-for="item in swipeData">
            <view class="swipeItem">
                <view class="image">
                    <up-image class="upImage"
                        src="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b"
                        width="188rpx" height="148rpx" radius="5"></up-image>
                    <view class="activityState" v-if="item.state == 0 || item.state == 1 || item.state == 2"
                        :class="item.state == 0 ? 'unStartBg' : item.state == 1 ? 'startingBg' : 'overBg'">
                        <text v-if="item.state == 0" class="unStart">未开始</text>
                        <text v-else-if="item.state == 1" class="starting">进行中</text>
                        <text v-else class="over">已结束</text>
                    </view>
                </view>
                <view class="info" :class="item.price ? '' : 'infoToLeft'">
                    <text class="name">{{ item.name }}</text>
                    <text class="price" v-if="item.price">价格:{{ item.price }}元</text>
                    <text class="time" v-else>{{ item.time }}</text>
                    <text class="address">{{ item.address }}</text>
                </view>

            </view>
        </u-swipe-action-item>
    </u-swipe-action>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

defineProps(['swipeData'])
const swipeOptions = ref([
    {
        text: '再次发布',
        style: {
            backgroundColor: '#976AFF',

        }
    },
    {
        text: '删除',
        style: {
            backgroundColor: '#EA5C45',
        }
    }
])
</script>
<style lang="scss" scoped>
.swipeItem {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0 10rpx;
    margin: 20rpx 0;

    .image {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 15rpx;

        .activityState {
            position: relative;
            top: 63rpx;
            right: 60rpx;
            font-size: 17rpx;
            padding: 2rpx 6rpx;
            background-color: #75777B;
            border-radius: 10rpx 0 10rpx 0;
            color: #EBECF0;
        }

        .unStartBg {
            background-color: #976CFE;
        }

        .startingBg {
            background-color: #F55773;
        }

        .overBg {
            background-color: #75777B;
        }
    }

    .info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 15rpx;

        .name {
            font-size: 34rpx;
            margin-bottom: 10rpx;
        }

        .price {
            margin-bottom: 4rpx;
            font-size: 25rpx;
            color: #C27988;
        }

        .time {
            margin-bottom: 10rpx;

        }

        .time,
        .address {
            font-size: 22rpx;
            color: #B0B0B0;
        }
    }

    .infoToLeft {
        margin-left: -30rpx;
    }
}
</style>